<template>
  <flight-menu left>
    <template v-slot:header>
      <span class="f-menu--title" style="margin-left: var(--inner-padding)">
        {{ title }}
      </span>
    </template>
    <template v-slot:default>
      <div class="row row--column">
        <div
          v-for="(s, i) in subtitles"
          :key="'s-l-' + i"
          class="f-right-card__content"
          style="margin: 0 0 1rem 0"
        >
          <div class="row align-items-center">
            <div class="f-right-card--icon-left r-icon-1"></div>
            <div class="row row--column" style="margin-left: 2rem">
              <div class="col" style="font-weight: 600; font-size: 0.8vw">
                {{ s }}
              </div>
              <div class="col light-cyan--text">
                <em
                  class="font-weight-800 larger-font-size"
                  style="margin-right: 1rem; font-size: 1.2vw"
                >
                  {{ i === 0 ? nations.length : i === 1 ? lines : flights }}
                </em>
                <span style="font-weight: 600; font-size: 0.6vw"
                  >/
                  {{ i === 0 ? '个' : i === 1 ? '条' : '架' }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="f-right-card--title" style="margin: 0 0 1rem 0">
          通航国家名称
        </div>
        <div class="f-nation-grid__wrapper" @wheel="onScrollSlide">
          <left-slide
            :key="ci"
            :nations="c"
            :continental="prefixTitle"
            v-slot:default="{ Component }"
            v-for="(c, ci) in computedNations"
          >
            <transition name="fade-opacity">
              <component
                v-show="currentIndex === ci"
                :is="Component"
              ></component>
            </transition>
          </left-slide>
        </div>
      </div>
    </template>
  </flight-menu>
</template>

<script>
import FlightMenu from '../FlightMenu.vue';
import NationTemplate from '../NationTemplate.ts';
import LeftSlide from './LeftSlide.ts';
import { useCheckboxInjector } from '../../composables/useChecbox.ts';
import { isUndefined, clamp } from '@lagabu/tool';
export default {
  name: 'SecondLeft',
  components: {
    FlightMenu,
    NationTemplate,
    LeftSlide,
  },
  data() {
    return {
      title: '航班概况',
      prefixTitle: '',
      subtitles: ['通航国家和地区', '通航航线数', '通航航班数'],
      nations: [],
      lines: 0,
      flights: 0,
      currentIndex: 0,
      slideTimer: 0,
    };
  },
  computed: {
    computedLength() {
      return this.computedNations.length;
    },
    computedNations() {
      let temp = [],
        resultArray = [];
      for (let i = 0; i < this.nations.length; i++) {
        if (i !== 0 && i % 12 === 0) {
          resultArray.push([...temp]);
          temp = [];
        }
        temp.push(this.nations[i]);
      }
      if (temp.length !== 0) {
        resultArray.push([...temp]);
      }
      return resultArray;
    },
  },
  setup() {
    const { register, unregister, computedAirport } = useCheckboxInjector();
    return { register, unregister, computedAirport };
  },
  mounted() {
    if (this.$route.query) {
      this.prefixTitle = this.$route.query['continental'];
      this.title = this.prefixTitle + this.title;
    }
    this.register(this.getContinental);
    this.getContinental();
    this.$nextTick(() => {
      this.slideTimer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.computedLength;
      }, 10000);
    });
  },
  beforeUnmount() {
    this.unregister(this.getContinental);
    clearInterval(this.slideTimer);
    this.slideTimer = 0;
    this.currentIndex = 0;
  },
  methods: {
    onScrollSlide(e) {
      const deltaY = e.deltaY;
      if (!deltaY) return;
      if (deltaY > 0) {
        this.currentIndex = clamp(
          this.currentIndex + 1,
          0,
          this.computedLength - 1
        );
      } else {
        this.currentIndex = clamp(
          this.currentIndex - 1,
          0,
          this.computedLength - 1
        );
      }
    },
    getContinental() {
      if (isUndefined(this.computedAirport)) return;
      this.currentIndex = 0;
      return this.$http
        .get('/continental', {
          continental: this.prefixTitle,
          airport: this.computedAirport,
        })
        .then((result) => {
          if (result && result.status && result.status === 200) {
            const data = result.data;
            this.nations = data.nations;
            this.lines = data.lines;
            this.flights = data.flights;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
